新しいopswitchのアーキテクチャ ~Web編~

opswitch は、2023年1月30日にリニューアルを行いました。UIやバックエンド構成など全体を見直し、使いやすくなりパフォーマンスも改善されています。
今回はその新しくなった opswitch を支えるアーキテクチャを紹介していきます。

opswitch とは

opswitch は、AWS運用におけるインスタンスの起動・停止やバックアップの作成などを、ブラウザから自動で実行することができるAWS運用サポートツールです。 今回のリニューアルでアーキテクチャを一新し、新機能も追加されています。 新機能については、以下の記事で詳しく紹介しているのでぜひご覧ください。

opswitch の構成

opswitch はWeb、Worker、Schedulerの大きく3つのシステムがあります。 今回の記事はWeb側の構成を紹介します。

Web側の構成概要

SPA＋API という構成です。最近よく見かけるスタイルですね。 インフラにはAmplifyとECS Fargateといったマネージドサービスを使っており、サーバーを気にしなくて良いアーキテクチャ構成となっています。

また、Web側のアーキテクチャはすべてTypeScriptに統一しています。 IaCのためにAWS CDKを使用していますが、これもTypeScriptで管理しています。 言語を跨ぐコンテキストスイッチが無いので、とても快適に開発ができています。

フロントエンド

使用技術：Nuxt + Vuetify + Amplify

フロントエンドは Nuxt.js 、UIライブラリはVuetifyを採用しました。 採用理由としては、プロジェクトメンバーにNuxtの知見があり、今回の要件にも応えてくれそうという点でした。

現在はNuxt3が正式にリリースされましたが、プロジェクト開始当時はパブリックベータだったので現在はまだNuxt2を使用しています。 UIライブラリにはVuetifyを使用しており、大抵のフロントでのやりたいことはライブラリを使用することで完結できるので非常に重宝しています。

ホスティングにはAmplifyを使用しています。ドメイン管理やビルドなど、SPAを公開する上で必要なオプションは全て揃っているので便利です。

バックエンド

使用技術：Express + TypeORM + ECS on Fargate

APIのフレームワークにはExpressを使用しています。 また、データベースとのやりとりにはTypeORMを採用しています。

どちらもシンプルなフレームワークやライブラリなので、プロジェクトでの方針に合わせやすく柔軟な開発ができます。 Fargateについてもスケーリングをある程度自動で行なってくれるので、サーバー管理のことをあまり考えなくて良く、アプリケーション側に集中することができます。

デプロイ

使用技術：GitHub + CodePipeline + CodeBuild + CodeDeploy + ECR + ECS

おなじみCodeシリーズとGitHubを組み合わせた構成です。 CodePipelineでGitHubの変更を検知し、CodeBuild と CodeDeployでそれぞれECR、ECSに反映させています。

AWSのマネージドサービスをフルに活用することで、自前での管理を最小限にすることができています。 ECSへのデプロイを行う都合上、Circle CIなどのサードパーティ製品を使わずにAWSで完結させています。CodePipelineなどをCDKで管理するなどの手間はかかりますが、一度完成させてしまえばあまり変化することも少ないフローなので結果的にこれが最もシンプルな形になるかと思います。

また、AWS側のリソースはすべてCDKで管理しています。 最近は当たり前になってきているCI/CDですが、GitHubでブランチにマージするだけで全ての処理が走るようになっているので、非常に楽です。

終わりに

opswitch のWeb側のアーキテクチャを紹介していきました。
今回のリニューアルによって、使いやすさ・新機能・パフォーマンスなど様々な部分が改善されています。
opswitch では今後もみなさんの意見を取り入れながらさらに使いやすいサービスになるよう新機能の追加なども積極的に行なっていきます。

ぜひこの機会に、 opswitch を利用してAWSの運用をもっと快適にしてみませんか？

以下はopswitchの機能紹介の動画です。ぜひご覧ください。
※音声が出ます。